import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { get } from '../api/getData';
import host from '../config/host';
import wxUtils from '../utils/wxUtils';
import Hdgz from '../components/Hdgz';

import {getQueryString} from '../utils/util';

import {Toast, Modal, Tabs,ActivityIndicator } from 'antd-mobile';
import 'antd-mobile/lib/toast/style/index.css';
import 'antd-mobile/lib/tabs/style/index.css';
import 'antd-mobile/lib/activity-indicator/style/index.css';
import 'antd-mobile/lib/modal/style/index.css';

import '../static/styles/share.css';

const tabs = [
    {title: '排行榜', sub : '1'},
    {title: '好友默契', sub : '2'},
    {title: '我的邀请', sub : '3'},
];

class Share extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chose: 0,
            user:[],
            answer:[],
            invite:[],
            rank:[],
            animating:false,
            hdgz:false,
            cyCount:18888,
        };
    }

    componentDidMount() {
        let __this = this;
        __this.setState({
            animating: true
        });
        get('/api/activity/user', {}, function(error, data){
            if(error === null){
                __this.setState({
                    user: data.data.user,
                    answer: data.data.answer,
                    invite: data.data.invite,
                    rank: data.data.rank,
                    animating: false
                });

                wxUtils.share({
                    link:'http://moon.guoxiaoge.cn/api/wechat/open-platform/login/'+getQueryString('wid')+'?invite='+data.data.user.id,
                    description:'赶快来猜猜我喜欢的月饼口味吧',
                    title : "看看你到底有多爱我!",
                    imgUrl:data.data.user.headimgurl
                });
            }
        });

        get('/api/activity/cy-count', {}, function(error, data){
            if(error === null){
                __this.setState({
                    cyCount:data.data
                });
            }
        });
        document.title = '中秋佳节';

    }

    chose (chose){
        this.setState({chose});
    }

    prize (type){
        if(type === 'xiaohongbao'){
            if(this.state.user.xiaohongbao <= 0){
                Toast.info('没有开启星光宝盒的机会', 1);
                return false;
            }
            window.location.href = host.host + '/prize?type=1&token='+getQueryString('token')+'&wid='+getQueryString('wid')
        }else{
            if(this.state.user.dahongbao <= 0){
                Toast.info('没有开月光宝盒的机会', 1);
                return false;
            }
            window.location.href = host.host + '/prize?type=2&token='+getQueryString('token')+'&wid='+getQueryString('wid')
        }
    }

    onCloseModal() {
        this.setState({hdgz:false});
    }

    showModel(){
        this.setState({hdgz:true});
    }

    openMenu(){
        wxUtils.optionMenu(true);
    }

    render() {
        return <div className='moon-bg'>
            <ActivityIndicator
                toast
                text="加载中..."
                animating={this.state.animating}
             />


            <div className='moon-share-content'>
                <div className='moon-share-user'>
                    <div className='moon-share-user-headimg'><img src={this.state.user.headimgurl} /></div>
                    <div className='moon-share-user-info'>
                        <div className='moon-share-nick'>
                            <div>{this.state.user.nickname}</div>
                            <div onClick={()=>this.showModel()}>活动规则</div>
                        </div>
                        <div className='moon-share-like'>我最爱的月饼口味是:</div>
                    </div>
                </div>
                <div className='moon-share-chose'>
                    <div className='moon-share-chose-img'><img src={this.state.user.img_url} /></div>
                    <div className='moon-share-chose-title'>{this.state.user.title}</div>
                    <div className='moon-share-chose-notice' onClick={() => this.openMenu()}>分享朋友圈让TA猜猜你心意!</div>
                </div>
                <div className='moon-share-prize'>
                    <div className='moon-share-left'>
                        <div className='moon-share-prize-info'>
                            <div className='moon-share-prize-icon user'></div>
                            <div className='moon-share-prize-info-num'>人缘卡{this.state.user.popularity}张</div>
                        </div>
                        <div className='moon-share-prize-button'  onClick={() => this.prize('xiaohongbao')}>
                            <img src={require('../static/imgs/xingguangbaohe@2x.png')} />
                        </div>
                        <div>你有({this.state.user.xiaohongbao})次机会</div>
                    </div>
                    <div className='moon-share-right'>
                        <div className='moon-share-prize-info'>
                            <div className='moon-share-prize-icon xin'></div>
                            <div className='moon-share-prize-info-num'>默契值{this.state.user.tacit}点</div>
                        </div>
                        <div className='moon-share-prize-button' onClick={() => this.prize('dahongbao')}>
                            <img src={require('../static/imgs/yueguangbaohe@2x.png')} />
                        </div>
                        <div>你有({this.state.user.dahongbao})次机会</div>
                    </div>
                </div>
            </div>

            <Tabs tabs={tabs}
                initialPage={0}
                onChange={(tab, index) => { console.log('onChange', index, tab); }}
                onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                >
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#6f2cac' }}>
                    <div className='moon-share-detail-list'>
                        <div className='moon-share-detail-list-title'>
                            <div>排名</div>
                            <div>用户</div>
                            <div>默契值</div>
                        </div>
                        {
                            this.state.rank.map(function(item, index){
                                return(
                                    <div key={item.id} className='moon-share-detail-list-item'>
                                        <div className='moon-share-detail-list-item-answer'>{index+1}</div>
                                        <div className='moon-share-detail-list-item-user'>
                                            <div>{item.nickname}</div>
                                        </div>
                                        <div className='moon-share-detail-list-item-result'>
                                            {item.total_tacit}
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'between', backgroundColor: '#6f2cac' }}>
                      <div className='moon-share-detail-list'>
                          <div className='moon-share-detail-list-title'>
                              <div>好友</div>
                              <div>TA猜的口味</div>
                              <div>结果</div>
                          </div>
                          {
                              this.state.answer.map(function(item, index){
                                  return(
                                      <div key={item.id} className='moon-share-detail-list-item'>
                                          <div className='moon-share-detail-list-item-user'>
                                              <div>{item.nickname}</div>
                                          </div>
                                          <div className='moon-share-detail-list-item-answer'>{item.title}</div>
                                          <div className='moon-share-detail-list-item-result'>
                                              {
                                                  item.result === 1?
                                                    <img src={require('../static/imgs/icon/success@2x.png')} />
                                                    :
                                                    <img src={require('../static/imgs/icon/error@2x.png')} />
                                              }
                                          </div>
                                      </div>
                                  )
                              })
                          }
                      </div>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#6f2cac' }}>
                      <div className='moon-share-detail-list'>
                          <div className='moon-share-detail-list-title'>
                              <div>邀请了{this.state.invite.length}位好友</div>
                              <div>获得{this.state.user.total_popularity}张人缘卡</div>
                              <div>已使用{this.state.user.used_popularity}张</div>
                          </div>
                          {
                              this.state.invite.map(function(item, index){
                                  return(
                                      <div key={item.id} className='moon-share-detail-list-item'>
                                          <div className='moon-share-detail-list-item-user'>
                                              <div>{item.nickname}</div>
                                          </div>
                                          <div className='moon-share-detail-list-item-answer'>
                                              <img src={item.headimgurl} />
                                          </div>
                                          <div className='moon-share-detail-list-item-result'>
                                              {item.create_time}
                                          </div>
                                      </div>
                                  )
                              })
                          }
                      </div>
                  </div>

            </Tabs>

            <div className='moon-share-cy'>参与人数:{this.state.cyCount}</div>

            <Hdgz hdgz={this.state.hdgz} onCloseModal={this.onCloseModal.bind(this)}></Hdgz>
        </div>
    }
}

export default Share;



            //
            // <div className='moon-share-detail'>
            //     <div className='moon-share-detail-tab active'>
            //         <div>好友默契</div>
            //     </div>
            //     <div className='moon-share-detail-tab'>
            //         <div>我的邀请</div>
            //     </div>
            //     <div className='moon-share-detail-tab'>
            //         <div style={{borderRight:'none'}}>排行榜</div>
            //     </div>
            // </div>
            // <div className='moon-share-detail-list'>
            //     <div className='moon-share-detail-list-title'>
            //         <div>好友</div>
            //         <div>TA猜的口味</div>
            //         <div>结果</div>
            //     </div>
            //     <div className='moon-share-detail-list-item'>
            //         <div className='moon-share-detail-list-item-user'>
            //             <img src={require('../static/imgs/binpi@2x.png')} />
            //             <div>张三张三张三</div>
            //         </div>
            //         <div className='moon-share-detail-list-item-answer'>五仁叉烧月饼</div>
            //         <div className='moon-share-detail-list-item-result'>
            //             <img src={require('../static/imgs/icon/success@2x.png')} />
            //         </div>
            //     </div>
            //     <div className='moon-share-detail-list-item'>
            //         <div className='moon-share-detail-list-item-user'>
            //             <img src={require('../static/imgs/binpi@2x.png')} />
            //             <div>张三张三张三</div>
            //         </div>
            //         <div className='moon-share-detail-list-item-answer'>五仁叉烧月饼</div>
            //         <div className='moon-share-detail-list-item-result'>
            //             <img src={require('../static/imgs/icon/error@2x.png')} />
            //         </div>
            //     </div>
            // </div>
            //
